<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>vue初始体验</title>
  <link rel="stylesheet" href="./css/h01.css">

</head>

<body>

  <div id="app">

    <h1>{{title}}</h1>

    <div>
      <input type="text" v-model="user.username">
      <input type="password" v-model="user.password">
      <button @click="showUser()">显示</button>
    </div>

    <div>
      {{user}}
    </div>

    <hr>

    <div class="menus">

      <div v-for="m in menus">
        <!-- 属性通过前面加:来注入变量 -->
        <a style="color: brown;" :href="m.href" target="_blank">{{m.title}}</a>
      </div>
      
    </div>

    {{menus}}

    <hr>

    <label>
      <input type="checkbox" v-model="visible">显示
      {{visible}}
    </label>

    <div v-if="visible">
      选中才会显示
    </div>


  </div>



  <script src="./js/h01.js" type="module"></script>
</body>

</html>